<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData"  size="mini" >
        <!--      <el-col :span="24">-->
        <!--        <el-form-item :label="$t('largeModel.problem')+':'" prop="content"> &lt;!&ndash;问题&ndash;&gt;-->
        <!--          <el-input v-model="formData.content" clearable :style="{width: '100%'}" readonly></el-input>-->
        <!--        </el-form-item>-->
        <!--      </el-col>-->
        <el-col :span="6">
          <el-form-item  prop="largeModel" label-width="0">
            <el-select v-model="formData.largeModel" :placeholder="$t('largeModel.largeModelTips')" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item) in largeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--提示词-->
          <el-form-item  prop="tipWord" label-width="0">
            <div style="display: flex;align-items: center;justify-content: space-between">
              <el-select v-model="formData.tipWord" :placeholder="$t('largeModel.selectTipWordTips')" clearable :style="{width: '100%'}">
                <el-option
                  v-for="item in promptList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-link type="primary" @click="showPrompt = true" :underline="false" style="white-space: nowrap;margin-left: 5px" v-if="formData.largeModel">
                {{$t('aicosCommon.addBtn')}}  <!--新增-->
              </el-link>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="modeList.length">
          <!--生成模式-->
          <el-form-item  prop="mode"  label-width="0" >
            <el-select v-model="formData.mode" :placeholder="$t('largeModel.selectModeTip')" clearable :style="{width: '100%'}">
              <el-option
                v-for="item in modeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <span style="float: left">{{ item.name }}</span>
                <el-tooltip class="item" effect="dark" :content="$t('largeModel.commonModeTips')" placement="top" v-show="item.id == '1'">
                  <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="$t('largeModel.precisionTips')" placement="top" v-show="item.id == '2'">
                  <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="$t('largeModel.extensionTips')" placement="top" v-show="item.id == '3'">
                  <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
                </el-tooltip>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <img src="./asset/resetBtn.png" style="height: 28px;cursor:pointer;" @click="handlerReBuild" v-if="formData.largeModel&&formData.tipWord&&!showPrompt"/>
          <img src="./asset/resetDisableBtn.png" style="height: 28px;cursor:pointer;" v-if="formData.largeModel&&formData.tipWord&&showPrompt"> <!--重新生成-->
        </el-col>
      </el-form>
    </el-row>

    <transition name="el-zoom-in-top">
      <Prompt
        v-if="showPrompt"
        :formData="formData"
        :content="content"
        type="answer"
        @handlerTest="handlerTest"
        @handlerSave="handlerSave"
        @handlerCancel="handlerCancel"
      />
    </transition>
  </div>

</template>


<script>
import {modelList, modelPromptList} from "@/api/aiccApi/aiccLargeModel";
import Prompt from './prompt.vue';
export default {
  components: {
    Prompt
  },
  data(){
    return{
      formData:{
        largeModel:'',
        tipWord:'',
        mode:''
      },
      showPrompt:false,
      largeList:[],
      promptList:[],
      modeList:[]
    }
  },

  watch:{
    'formData.largeModel':{
      handler(val){
        let that = this;
        const commonMode =   {
          id:'1',
          name:this.$t('largeModel.commonMode') //普通模式
        };
        const precisionMode = {
          id:'2',
          name:this.$t('largeModel.precision') //精确模式
        };
        const extensionMode = {
          id:'3',
          name:this.$t('largeModel.extension') //拓展模式
        };
        that.modeList = [];
        that.formData.mode = '';
        setTimeout(()=>{
          const arr = that.largeList.filter(item=>{
            if(item.id == val){
              return item
            }
          });
          if(!arr.length){
            return
          }
          const pattern = arr[0].pattern;
          if(pattern !== null){
            const patternArr = pattern.split(',');
            patternArr.forEach((item)=>{
              if(item == 1){
                that.modeList.push(commonMode)
              }else if (item == 2){
                that.modeList.push(precisionMode)
              }else if (item == 3){
                that.modeList.push(extensionMode)
              }
            })
          }else{
            that.modeList = [];
          }
        },10)
      },
      immediate:true
    },
  },

  props:{
    content:{
      type:String,
      default:() => ''
    },
  },

  mounted(){
    this.getModelList();

    this.getPromptList();
  },

  methods:{
    //获取模型列表
    getModelList(){
      const info = {
        current:1,
        size:10000,
        name:'',
        type:'',
      };
      modelList(info).then(res=>{
        if(res.data.code == 200){
          const Data = res.data.data;
          this.largeList = Data.records;
          this.notLargeList = Data.records;
        }
      })
    },

    //获取提示词列表
    getPromptList(){
      const info = {
        type:'',
        isDefault:'',
        name:'',
        current:1,
        size:10000,
        businessType:'2'
      };
      modelPromptList(info).then(res=>{
        if(res.data.code == 200){
          const Data = res.data.data;
          this.promptList = Data.records;
        }
      })
    },


    handlerReBuild(){
      this.$emit('handlerReBuild',this.formData)
    },

    handlerTest(val){
      this.$emit('handlerTest',val)
    },

    handlerSave(){
      this.showPrompt = false;
      this.getPromptList();
    },

    handlerCancel(){
      this.showPrompt = false;
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-col{
  margin: 0 !important;
}
</style>
